<style>
    html,
    body {
        background: #eee;
    }

    .top {

        background: #fff;
        color: #ba9fe8;
        font-size: 14px;
        line-height: 25px;
    }

    .top .tip.font-s {
        color: #6B9399;
    }

    .title {
        line-height: 40px;
        color: #253B3E;
        font-weight: bold;
        font-size: 14px;
    }

    .w-bg {
        background: #fff;
    }

    /* vip套餐 */
    .vip-wrap {
        display: -webkit-box;
        overflow-x: auto;
        padding: 10px 0;
    }

    .v-list {
        border-radius: 8px;
            box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.5);
            margin: 0 10px;
            padding: 40px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
    }

    .v-list.active {
        color: #663DFB;
            border: 3px solid;
    }

    .v-list .time {
        font-size: 16px;
        font-weight: bold;
        line-height: 50px;
    }

    .hot {
        position: absolute;
        right: 0;
        top: 5px;
        background: #FF5D6E;
        color: #fff;
        border-radius: 3px 0 0 3px;
        padding: 1px 5px;
        font-size: 10px;
    }

    /* 支付方式 */
    .p-list {
        display: flex;
        align-items: center;
        padding: 10px 0;
        margin: 0 10px;
        border-bottom: 1px solid #eee;
        font-size: 14px;
        color: #555555;
    }

    .p-list:last-child {
        border-bottom: none;
    }

    .p-list.active {
        background-image: url('../image/select2.png');
        background-repeat: no-repeat;
        background-size: 20px 20px;
        background-position: 100% center;
    }

    .p-list img {
        width: 20px;
        margin-right: 10px;
    }

    .submit {
        width: calc(100% - 20px);
        margin: 20px 10px;
        line-height: 40px;
        background: #673AB7;
        color: #fff;
        border-radius: 5px;
        box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.5);
    }

    .zhanwei {
        width: 5px;
        height: 50px;
    }
    .tip-tag {
            background: #E6F1F2;
            border-radius: 20px;
            margin-right: 10px;
            padding: 1px 15px;
        }

        .tip .t-list {
            margin-bottom: 10px;
        }
</style>

<div id="view" v-cloak>
    <div class="top new-padding-10">
        <!-- <p class="title" style="color: #f3f3f3;">会员特权</p> -->
        <p class="title">会员特权</p>
        <ul class="tip font-s">
            <li class="t-list"> <span class="tip-tag">看的更多</span>每天不限次数查看用户</li>
                <li class="t-list"> <span class="tip-tag">看的更省</span>每天10次免费机会查看付费相册或社交账号</li>
                <li class="t-list"> <span class="tip-tag">看的更久</span>每天阅后即焚照片的时间从2秒提升到6秒</li>
                <li class="t-list"> <span class="tip-tag">看的更爽</span>免费发布节目广播</li>
        </ul>
    </div>
    <p class="title new-padding-lr-10">选择套餐</p>
    <div class="vip-wrap-bg w-bg new-padding-10">
        <ul class="vip-wrap ">
            <li class="v-list" :class="{'active': m.hot == 1}" v-for="(m, index) in ffInfo" @click="selectVip(m, $event)">
                <span class="name">{{ m.vip_name }}</span>
                <span class="time">{{ m.chang }}</span>
                <div class="money" style="font-size: 18px;"><b>{{ m.vip_price }}</b>币</div>
                <div class="money" style="font-size: 14px;">约{{ (m.pingjun).toFixed(2) }}币/月</div>
                <span class="hot" v-if="m.hot == 1">推荐</span>
            </li>
            <span class="zhanwei"></span>
            <!-- <li class="v-list" >
                    <span class="name">会员</span>
                    <span class="time">一个月</span>
                    <div class="money"><b>99</b>元/月</div>
                    <span class="hot">hot</span>
                </li> -->
        </ul>
    </div>
    <!-- <p class="title new-padding-lr-10">支付方式</p>
    <ul class="pay-wrap w-bg">
        <li class="p-list active coin" data-type=0 onclick="selectPay(this)">
            <img src="../image/pay/yue.png" alt="">
            <span>零钱支付</span>
        </li>
        <li class="p-list zfb" data-type=1 onclick="selectPay(this)">
            <img src="../image/pay/zfb.png" alt="">
            <span>支付宝支付</span>
        </li>
        <li class="p-list" data-type=2 onclick="selectPay(this)">
            <img src="../image/pay/wx.png" alt="">
            <span>微信支付</span>
        </li>
        <li class="p-list">
            <span>支付金额: <b style="color: #673AB7;">{{ vipObj.vip_price }}</b> 元</span>
        </li>
    </ul> -->
    <button class="submit" onclick="submit()">立即购买</button>
</div>
<script>
    var regType;
    var showDate = new Vue({
        el: '#view',
        data: {
            ffInfo: {}, // vip 套餐列表
            vipObj: {}, // 选择的vip类型
        },
        methods: {
            _url: function (pageParam, url, login) {
                _url(pageParam, url, login);
            },
            // 选择套餐类型
            selectVip: function (vip, event) {
                var _this = this;
                _this.vipObj = vip;
                var e = event.currentTarget;
                $(e).addClass('active').siblings().removeClass('active');
            },

        }
    })

    // 若是注册时购买会员 隐藏余额支付
    regType = pageParam['type'];
    if (regType) {
        $('.coin').remove();
        $('.zfb').addClass('active');
    }
    getVip();

    // 获取套餐列表
    function getVip() {
        _ajax('home/user/vipstyle', function (ret, err) {
            if (ret.code == 200) {
                showDate.ffInfo = ret.data;
                showDate.vipObj = showDate.ffInfo[0];
                for(var i=0,len=ret.data.length;i<len;i++){
                    if(showDate.ffInfo[i].hot == 1){
                        showDate.vipObj = showDate.ffInfo[i];
                    }
                }
            }
        })
    }

    // 选择支付方式
    function selectPay(obj) {
        $(obj).addClass('active').siblings().removeClass('active');
    }

    // 购买vip
    function submit() {
        _ajax('Home/User/vip_buy', function (ret) {
            _log(JSON.stringify(ret))
            _msg(ret.result);
            if (ret && ret.code == 200) {
                timerWin();
            }
        }, {
            type: showDate.vipObj.type,
            user_id: myuserid,
            price: showDate.vipObj.vip_price,
            leixing: 0,
        })
    }
</script>